<template>
  <div>
    <el-row>
      <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >添加</el-button
      >
      <el-table
        :data="tableData"
        class="table-body"
        :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
        :tree-props="{ children: 'childMenu' }"
        row-key="menuId"
      >
        <el-table-column
          prop="menuName"
          label="菜单名称"
          width="220"
        ></el-table-column>
        <!--        <el-table-column-->
        <!--          prop="permission"-->
        <!--          label="权限标识"-->
        <!--          width="220"-->
        <!--        ></el-table-column>-->
        <el-table-column prop="menuPath" label="路由路径">
          <template slot-scope="scope">
            {{ scope.row.menuPath || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="action" label="请求路径">
          <template slot-scope="scope">
            {{ scope.row.action || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="menuType" label="类型">
          <template slot-scope="scope">
            {{
              scope.row.menuType === 0
                ? "目录"
                : scope.row.menuType === 1
                ? "菜单"
                : scope.row.menuType === 2
                ? "按钮"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          show-overflow-tooltip
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleCheck(scope.row.menuId)"
              >编辑</el-button
            >
            <!--            <el-button type="text" @click="handleAdd(scope.row.menuId)">新增</el-button>-->
            <el-button type="text" @click="handleDelete(scope.row.menuId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <Add
      ref="add"
      :tableData="tableData"
      @getParentTableData="getParentTableData"
    />
    <Detail
      ref="detail"
      :tableData="tableData"
      @getParentTableData="getParentTableData"
    />
  </div>
</template>

<script>
// import { mapMutations } from "vuex";
import Add from "./Add.vue";
import Detail from "./Detail.vue";
// import { getUserListApi } from "@/api/modules/user.api";
import { deleteMenuApi } from "@/api/modules/menu.api";

export default {
  components: { Add, Detail },
  props: ["tableData"],
  data() {
    return {
      labelPosition: "right",
      visible: false,
      id: "",
      from: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  // async mounted() {
  //   const item = await getUserListApi({pageNum: 1,pageSize: 10})
  //   this.tableData = item.records
  //   this.count = item.total
  // },
  methods: {
    handleCheck(id) {
      this.$refs.detail.init(id);
    },
    handleAdd(id) {
      this.$refs.add.init(id);
    },
    getParentTableData() {
      this.$emit("getTableData");
    },
    async handleDelete(id) {
      await deleteMenuApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
  },
};
</script>
